<template>
  <div class="bg-color">

    <div class="nav-box" ref="navBox">
      <ul class="navbar">
        <li class="navbar-item" v-for="(v,k) in eOrderStatusList" :key="k" @click="selectOrderStatus(v.status)" :class="{active:status==v.status}">
          {{v.name}}
        </li>
      </ul>
    </div>

    <div v-show="orderList.length==0" class="no-panel" ref="noPanel">
      <div>
        <img src="../../../../static/images/order/no.png" alt="">
        <p>暂无数据</p>
      </div>
    </div>

    <div class="loadmore-wrapper" ref="loadmoreWrapper">
      <div ref="orderWarn">
        <div class="order-warn" v-show="orderList.length!=0&&status==waitForPay">
          <div><p>自订单创建时起，买家30分钟内未完成付款，订单将关闭，你将获得赔偿金500元</p></div>
        </div>
        <div class="order-warn" v-show="orderList.length!=0&&status==waitForDelivery">
          <div><p>自付款完成时起，2天内未发货，订单将关闭，买家支付金额原路退还</p></div>
        </div>
        <div class="order-warn" v-show="orderList.length!=0&&status==waitForReceive">
          <div><p>自卖家发货时起，买家10天内未确认收货，交易自动成功</p></div>
        </div>
        <div class="order-warn" v-show="orderList.length!=0&&status==100">
          <div><p>自客服受理维权请求时起，买家2天内不发起退货，交易自动成功</p></div>
        </div>
      </div>
      <mt-loadmore :bottom-method="loadBottom"
                   @bottom-status-change="handleBottomChange"
                   :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false" :bottomDropText="topDropText" :bottomPullText="topDropText">
        <ul class="panel" v-show="orderList.length!=0">
          <li class="order-list" v-for="(v,k) in orderList" :key="k">
            <div class="order-title-box">
              <div class="order-title">
                <router-link :to="{name:'shopDetail',query:{shopId:v.shopId}}" class="order-shop">{{v.shopName}}<img src="../../../../static/images/order/jiantou.png" alt=""></router-link>
                <div  v-if="v.wasSafeguard == 1">
                  <div class="order-status" v-if="v.mordRefundOrderPojo.status==rfComplete">维权已处理</div>
                  <div class="order-status" v-else>客服处理维权中</div>
                </div>
                <div v-else>
                  <div class="order-status" v-if="v.status==waitForPay">等待买家付款</div>
                  <div class="order-status" v-if="v.status==waitForDelivery">等待卖家发货</div>
                  <div class="order-status" v-if="v.status==waitForReceive">卖家已发货</div>
                  <div class="order-status" v-if="v.status==waitForEvaluation || v.status==finished">交易成功</div>
                  <div class="order-status" v-if="v.status==invalid">订单关闭</div>
                </div>
              </div>
              <!--rfApply:null,//申请维权5-->
              <!--rfNoagree:null,//客服不同意受理10-->
              <!--rfAgree:null,//客服同意受理15-->
              <!--rfRefund:null,//退货中20-->
              <!--rfInvalid:null,//驳回50-->
              <!--rfComplete:null,//已完成99-->
              <div class="order-time" v-if="v.wasSafeguard == 1&&v.mordRefundOrderPojo.status==rfApply">已收到您的维权请求</div>
              <div class="order-time" v-if="v.wasSafeguard == 1&&v.mordRefundOrderPojo.status==rfAgree">
                剩余退货时间<count-time :startTime="v.mordRefundOrderPojo.modTime" :totalTime="refundUndeliverTimeout" :timestamp="v.timestamp" endText="已经结束了"></count-time>
              </div>
              <div class="order-time" v-if="v.wasSafeguard == 1&&v.mordRefundOrderPojo.status==rfRefund">客服人员收到拍品后，会对其进行验货</div>

              <div class="order-time" v-if="v.wasSafeguard == 0&&v.status==waitForPay">
                剩余付款时间<count-time :startTime="v.createTime" :totalTime="orderUnpayTimeout" :timestamp="v.timestamp" endText="已经结束了"></count-time>
              </div>
              <div class="order-time" v-if="v.wasSafeguard == 0&&v.status==waitForDelivery">
                剩余发货时间<count-time v-if="v.accounTransactionPojo" :startTime="v.accounTransactionPojo.payTime" :totalTime="orderUnpayTimeout" :timestamp="v.timestamp" endText="已经结束了"></count-time>
              </div>
              <div class="order-time" v-if="v.wasSafeguard == 0&&v.status==waitForReceive">
                剩余确认收货时间<count-time :startTime="v.deliveryTime" :totalTime="autoDeliveryTimeOut" :timestamp="v.timestamp" endText="已经结束了"></count-time>
              </div>
            </div>

            <router-link :to="{name:'orderDetail',query:{orderId:v.id}}" class="order-pro">
              <div class="order-pro-img" :style="'backgroundImage: url('+(v.productImageUrl.substr(0,4).toLowerCase() == 'http' ? v.productImageUrl : resUrl+v.productImageUrl)+')'"></div>
              <div class="order-pro-name">{{v.productName}}</div>
              <div class="order-pro-type">
                <img src="../../../../static/images/order/yikoujia.png" alt="">
                <!--<img  v-if="v.productType!=fixedPrice" src="../../../../static/images/order/jinpai.png" alt="">-->
              </div>
            </router-link>

            <div class="order-footer">
              <div class="order-price">
                合计：<span>￥{{v.totalMoney | toDecimal}} </span> (含运费￥{{v.postage | toDecimal}})
              </div>
              <div class="order-btn-box">
                <!--rfApply:null,//申请维权5-->
                <!--rfNoagree:null,//客服不同意受理10-->
                <!--rfAgree:null,//客服同意受理15-->
                <!--rfRefund:null,//退货中20-->
                <!--rfInvalid:null,//驳回50-->
                <!--rfComplete:null,//已完成99-->
                <div  class="order-btn-left">
                  <div  v-if="v.wasSafeguard == 1">
                    <router-link :to="{name:'afterDetail',query:{orderId:v.id,code:v.code}}" class="order-btn" v-if="v.mordRefundOrderPojo.status==rfAgree||v.mordRefundOrderPojo.status==rfRefund">维权信息</router-link>
                    <span class="order-btn" v-if="v.mordRefundOrderPojo.status==rfComplete" @click="deleteOrder(v.id)">删除订单</span>
                  </div>
                  <div v-else>
                    <router-link :to="{name:'afterService',query:{orderId:v.id,code:v.code}}" class="order-btn" v-if="v.status==waitForReceive">客服维权</router-link>
                    <span class="order-btn" v-if="v.status==waitForPay||v.status==waitForDelivery||v.status==waitForReceive||v.status==waitForEvaluation||v.status==finished">联系卖家</span>
                    <span class="order-btn" v-if="v.status==waitForEvaluation||v.status==invalid||v.status==finished" @click="deleteOrder(v.id)">删除订单</span>
                  </div>
                </div>

                <div class="order-btn-right">
                  <div v-if="v.wasSafeguard == 1">
                    <router-link :to="{name:'afterDetail',query:{orderId:v.id,code:v.code}}" class="order-btn order-btn-red" v-if="v.mordRefundOrderPojo.status==rfApply">维权信息</router-link>
                    <router-link :to="{name:'returnGoods',query:{orderId:v.id}}" class="order-btn order-btn-red" v-if="v.mordRefundOrderPojo.status==rfAgree">退货</router-link>
                    <router-link :to="{name:'orderDetail',query:{orderId:v.id}}" class="order-btn order-btn-red" v-if="v.mordRefundOrderPojo.status==rfRefund">查看详情</router-link>
                    <span class="order-text-red" v-if="v.mordRefundOrderPojo.status==rfComplete">退款成功 支付金额已原路退还</span>
                  </div>
                  <div v-else>
                    <router-link class="order-btn order-btn-red" v-if="v.status==waitForPay" :to="{name:'orderDetail',query:{orderId:v.id}}">立即付款</router-link>
                    <span class="order-btn order-btn-red" v-if="v.status==waitForDelivery" @click="remind(v.id)">提醒卖家发货</span>
                    <span class="order-btn order-btn-red" v-if="v.status==waitForReceive" @click="collectGoods(v.id)">确认收货</span>
                    <router-link :to="{name:'evaluate',query:{shopId:v.shopId,orderId:v.id}}" class="order-btn order-btn-red" v-if="v.status==waitForEvaluation">评价</router-link>
                    <router-link :to="{name:'viewEvaluate',query:{shopId:v.shopId,orderId:v.id}}" class="order-btn order-btn-red" v-if="v.status==finished">查看评价</router-link>
                    <span class="order-text-red" v-if="v.status==invalid&&v.closeType==0">超时未付款，扣除保证金{{v.cashDeposit | toDecimal}}元</span>
                    <span class="order-text-red" v-if="v.status==invalid&&v.closeType==1">卖家发货超时，支付金额已原路退还</span>
                  </div>
                </div>

              </div>
            </div>
          </li>
        </ul>
      </mt-loadmore>
    </div>

  </div>
</template>

<script>
  import {ipconfig} from '../../../assets/js/ipconfig';
  import {getStatusMapByKey} from '../../../assets/js/tools';
  import {getMyOrderList,deleteOrder,deliverReminding,collectOrder} from '../../../assets/js/getData';
  import '../../../assets/css/order.css';
  export default {
    name: "myOrder",
    data(){
      return{
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        eOrderStatusList:[],
        orderList:[],
        status:null,//订单状态

        orderUnpayTimeout:null,//超时未支付
        orderUndeliverTimeout:null,//超时未发货
        autoDeliveryTimeOut:null,//自动确认收获
        refundUndeliverTimeout:null,//售后超时发货

        waitForPay:null,//待付款5
        waitForDelivery:null,//待发货10
        waitForReceive:null,//待收货15
        waitForEvaluation:null,//待评价20
        paying:null,//支付中7
        invalid:null,//无效0
        finished:null,//交易完成50

        rfApply:null,//申请维权5
        rfNoagree:null,//客服不同意受理10
        rfAgree:null,//客服同意受理15
        rfRefund:null,//退货中20
        rfInvalid:null,//驳回50
        rfComplete:null,//已完成99



        auction:null,//竞拍拍品
        fixedPrice:null,//一口价拍品
        fixedPriceAndAuction:null,//一口价与竞拍拍品

        pageNum:1,
        pageSize:5,
        total:null,
        allLoaded: false,
        topDropText:'加载更多',
      }
    },
    created(){
      let eOrderStatus = getStatusMapByKey('eOrderStatus');
      this.invalid = eOrderStatus.invalid.val;//无效0
      this.paying = eOrderStatus.paying.val;//支付中7
      this.waitForPay = eOrderStatus.waitForPay.val;//待付款5
      this.waitForDelivery = eOrderStatus.waitForDelivery.val;//待发货10
      this.waitForReceive = eOrderStatus.waitForReceive.val;//待收货15
      this.waitForEvaluation = eOrderStatus.waitForEvaluation.val;//待评价20
      this.finished = eOrderStatus.finished.val;//交易完成50
      this.eOrderStatusList = [
        {name:'全部',status:null},
        {name:'待付款',status:this.waitForPay},
        {name:'待发货',status:this.waitForDelivery},
        {name:'待收货',status:this.waitForReceive},
        {name:'待评价',status:this.waitForEvaluation},
        {name:'退款/售后',status:100},
        {name:'订单关闭',status:this.invalid},
      ];

      let eRefundStatus = getStatusMapByKey('eRefundStatus');
      this.rfApply = eRefundStatus.apply.val;//申请维权5
      this.rfNoagree = eRefundStatus.noagree.val;//客服不同意受理10
      this.rfAgree = eRefundStatus.agree.val;//客服同意受理15
      this.rfRefund = eRefundStatus.refund.val;//退货中20
      this.rfInvalid = eRefundStatus.invalid.val;//验货之后驳回维权50
      this.rfComplete = eRefundStatus.complete.val;//已完成99

      let eProductType = getStatusMapByKey('eProductType');
      this.auction =  eProductType.auction.val;//竞拍拍品
      this.fixedPrice =  eProductType.fixedPrice.val;//一口价拍品
      this.fixedPriceAndAuction =  eProductType.fixedPriceAndAuction.val;//一口价与竞拍拍品


      this.status = this.$route.query.status;
      this.getMyOrderList(this.status);

    },
    mounted(){
      // 元素的实际高度
      let h1 = this.$refs.navBox.offsetHeight;
      let h = document.documentElement.clientHeight; //可见区域高度
      this.$refs.noPanel.style.height = (h-h1)+'px';
      this.$refs.loadmoreWrapper.style.height = (h-h1)+'px';
    },
    methods:{
      //上拉加载更多
      loadBottom() {
        if(this.pageNum < this.total) {
          this.pageNum++;
          this.getMyOrderList(this.status,true);
        }else {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      handleBottomChange(status){
        console.log(status);
      },

      //确认收货
      collectGoods(id){
        MessageBox.confirm('确认收货后，支付金额将打给卖家无法再发起维权，是否确认？','').then(() => {
          collectOrder(id).then(res => {
            if(res.data.reqResult.code>0){
              this.getMyOrderList(this.status);
            }else {
              Toast(res.data.reqResult.msg);
            }
          })
        }).catch(()=>{})
      },
      //发货提醒
      remind(id){
        deliverReminding(id).then(res => {
          if(res.data.reqResult.code>0){
            Toast('提醒卖家发货成功');
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //删除订单
      deleteOrder(id){
        MessageBox.confirm('确认删除该订单记录？','').then(() => {
          deleteOrder(id).then(res => {
            if(res.data.reqResult.code>0){
              this.getMyOrderList(this.status);
            }else {
              Toast(res.data.reqResult.msg);
            }
          })
        }).catch(()=>{})
      },
      //获取订单列表
      async getMyOrderList(status,isLoaded){
        let params = {};
        if(status==100){
          params = {
            wasSafeguard:1,
            pageNum:this.pageNum,
            pageSize:this.pageSize
          };
        }else if(status==this.waitForReceive){
          params = {
            status:status,
            wasSafeguard:0,
            pageNum:this.pageNum,
            pageSize:this.pageSize
          };
        } else {
          params = {
            status:status,
            pageNum:this.pageNum,
            pageSize:this.pageSize
          };
        }
        let res = await getMyOrderList(params);
        if(res.data.reqResult.code>0){
          this.orderUnpayTimeout = res.data.data.orderUnpayTimeout;//超时未支付
          this.orderUndeliverTimeout = res.data.data.orderUndeliverTimeout;//超时未发货
          this.autoDeliveryTimeOut = res.data.data.autoDeliveryTimeOut;//自动确认收获
          this.refundUndeliverTimeout = res.data.data.refundUndeliverTimeout;//售后超时发货
          this.total = Math.ceil(res.data.total / this.pageSize);
          if(isLoaded){
            this.orderList = this.orderList.concat(res.data.data.data);
          }else {
            this.orderList = res.data.data.data;
          }
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //切换订单状态
      selectOrderStatus(status){
        this.pageNum = 1;
        this.allLoaded = false;
        this.status = status;
        this.getMyOrderList(this.status);
      },

    }
  }
</script>

<style scoped>
  .bg-color{
    min-height: 100vh;
  }
  .nav-box{
    width: 100%;
    overflow: auto;
  }
  .navbar{
    background-color: #ffffff;
    padding-left: 0.75rem;
    width: max-content;
    display: flex;
  }
  .navbar-item{
    height: 2.2rem;
    line-height: 2.2rem;
    margin-right: 0.75rem;
    box-sizing: border-box;
    font-size: 0.7rem;
    color: #666666;
  }
  .navbar-item.active{
    color: #C50000;
    border-bottom: 2px solid #C50000;
  }
  .no-panel{
    background-color: #F4F4F4;
  }
  .no-panel>div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
  }
  .no-panel img{
    width: 4.4rem;
    height: 5.7rem;
  }
  .no-panel p{
    color: #CDCDCD;
    font-size: 0.75rem;
    margin-top: 1.5rem;
  }
  .order-warn{
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #e5e5e5;
    padding: 0 0.75rem;
  }
  .order-warn div{
    overflow: auto;
  }
  .order-warn p{
    white-space: nowrap;
    height: 2.15rem;
    line-height: 2.15rem;
    box-sizing: border-box;
    color: #666666;
    font-size: 0.6rem;
    padding: 0 0 0 1.25rem;
    background-image: url("../../../../static/images/order/wran.png");
    background-repeat: no-repeat;
    background-size: 0.65rem 0.65rem;
    background-position: left center;
  }
  .panel{
    border-top: 1px solid #e5e5e5;
  }
  .panel .order-list:last-child{
    margin-bottom: 0;
  }
  .loadmore-wrapper{
    overflow: scroll;
  }
</style>
